<template>
    <div class="mian-box">
        <websitetop :active="5"></websitetop>
        <div class="banner">
            <el-carousel height="960px">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="body-box">
            <div class="box-one">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">关于我们——赋能实体经济数字化</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox">
                        <div class="img-box">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img01.png" alt="">
                        </div>
                        <div class="box-mian-text">
                            知品屋是领先创新的跨境电商新零售SaaS整体解决方案服务商，通过自主研发的跨境电商SaaS系统打造“云仓、云店、云服务”赋能矩阵，致力于服务成渝双城经济圈、西部陆海新通道政企客户在商贸、文旅、服务等领域数字化变革和增值赋能。
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="box-one" style="background-color: #fff;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">赋能三核心</div>
                </div>
                <div class="box-mian flex-center" style="margin-top: 84px;">
                    <div class="service-small-box">
                        <div class="service-img">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img26.png" alt="">
                        </div>
                        <div class="service-text">愿景</div>
                        <div class="service-text-box">
                            成为创新卓越的企业级跨境电商新零售SaaS赋能专家
                        </div>
                    </div>
                    <div class="service-small-box" style="margin-left: 43px;margin-right: 43px;">
                        <div class="service-img">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img27.png" alt="">
                        </div>
                        <div class="service-text">使命</div>
                        <div class="service-text-box">
                            助推实体经济线上线下融合发展
                        </div>
                    </div>
                    <div class="service-small-box">
                        <div class="service-img">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img28.png" alt="">
                        </div>
                        <div class="service-text">业务定位</div>
                        <div class="service-text-box">
                            为客户提供一站式、全场景、生态化的跨境电商新零售SaaS解决方案
                        </div>
                    </div>       
                </div>
                <div class="box-mian flex-center text-footer">
                    <div>备注：企业级SaaS，是指以企业（政企）客户为服务对象，通过SaaS交付模式，</div>
                    <div> 向企业用户提供管理软件的服务。主要具有网络供应、集中托管、按需供应及服务化四大特征。</div>
                    <div style="color: #2B2F79;"> 知品屋通过“云仓、云店、云服务”赋能实体客户取得成功。</div>
                </div>
            </div>
            <div class="box-one" style="display: flex;flex-direction: column;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">公司发展历程</div>
                </div>
                <div class="fz-box" style="flex: 1;">
                    <div class="fz-box-top">
                        <div class="fz-small-box">
                            <div class="fz-small-text">
                                <div>新西兰上市公司“Green Cross Health”</div>
                                <div>旗下国民药妆品牌“UNICHEM联合大药房”</div>
                                <div>中国区线上、线下新零售总代理</div>
                            </div>
                            <div class="fz-small-time">2023年6月</div>
                        </div>
                        <div class="fz-small-box" style="width: 233px;">
                            <div class="fz-small-text">
                                <div>赋能国企和实体经济：</div>
                                <div>渝中区首个跨境电商线下体验店</div>
                                <div>在解放碑商圈大都会开业</div>
                            </div>
                            <div class="fz-small-time">2023年5月</div>
                        </div>
                        <div class="fz-small-box" style="width: 232px;">
                            <div class="fz-small-text">
                                <div>打造知品屋跨境新零售SaaS系统</div>
                                <div>开创赋能实体经济“云仓、云店、</div>
                                <div>云服务”模式</div>
                            </div>
                            <div class="fz-small-time">2020-2023年</div>
                        </div>
                        <div class="fz-small-box" style="width: 256px;margin-right: 85px;">
                            <div class="fz-small-text">
                                <div>平台底层搭建完成</div>
                                <div>运营团队+技术团队推进商用功能</div>
                                <div>研发和平台各项测试优化、迭代工作</div>
                            </div>
                            <div class="fz-small-time">2021年3月</div>
                        </div>
                    </div>
                    <div class="fz-box-img">
                        <img style="width: 100%;height: 100%;" src="../../assets/img/home/img12.png" alt="">
                    </div>
                    <div class="fz-box-body">
                        <div class="fz-box-top" style="justify-content: space-between;">
                            <div class="fz-small-box" style="width: 175px;">
                                <div class="fz-small-time">2023年6月</div>
                                <div class="fz-small-text">
                                    <div>赋能就业：联合重庆对</div>
                                    <div>外经贸学院打造跨境电商</div>
                                    <div>产学研平台</div>
                                </div>
                            </div>
                            <div class="fz-small-box" style="width: 159px;">
                                <div class="fz-small-time">2023年5月</div>
                                <div class="fz-small-text">
                                    <div>入驻海口综保区开设</div>
                                    <div>跨境新零售仓储旗舰店</div>
                                </div>
                            </div>
                            <div class="fz-small-box" style="width: 146px;">
                                <div class="fz-small-time">2022年</div>
                                <div class="fz-small-text">
                                    <div> 赋能国企渝商发：</div>
                                    <div>打造渝中区首个</div>
                                    <div>智慧新零售SaaS平台</div>
                                    <div>国展全球市集</div>
                                </div>
                            </div>
                            <div class="fz-small-box" style="width: 131px;">
                                <div class="fz-small-time">2022年3月</div>
                                <div class="fz-small-text">
                                    <div>SaaS平台研发成功</div>
                                    <div>标杆客户签约推进</div>
                                </div> 
                            </div>
                            <div class="fz-small-box" style="width: 207px;">
                                <div class="fz-small-time">2020年6月</div>
                                <div class="fz-small-text">
                                    <div>汇聚顶级人才：</div>
                                    <div>工信部两化融合国家级试点</div>
                                    <div>商务部服务贸易国家级试点核</div>
                                    <div>心团队项目立项</div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="fz-box-bg">
                        <img style="width: 100%;height: 100%;" src="../../assets/img/home/img13.png" alt="">
                    </div>
                </div>
            </div>
            <div class="box-one" style="background: #fff;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">知品屋客户人群</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox">
                        <div class="img-box" style="width: 1306px;height: 520px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img14.png" alt="">
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="box-one">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">知品屋SaaS新零售“超级商圈私域”模型</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="margin-top: 70px;">
                        <div class="bg-f">
                            <div class="img-box" style="width: 1132px;height: 557px;">
                                <img style="width: 100%;height: 100%;" src="../../assets/img/home/img15.png" alt="">
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="box-one" style="background-color: #fff;height: 800px;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">客户案例</div>
                </div>
                <div class="text-h33">
                    <div>知品屋海南自贸岛仓储式旗舰店</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="margin-top: 40px;">
                        <div class="img-box" style="width: 775px;height: 378px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img16.png" alt="">
                        </div>
                        <div class="kh-text-box">
                            <div class="text-boxtitle">◆ 项目介绍</div>
                            <div class="text-boxbody"> 为积极响应重庆建设国家消费中心城市、加快推动实体经济线上线下融合发展、推动“智慧城市”建设等战略部  署、践行国企创先争优使命，重庆市渝中区属商业一类重点国有企业——重庆渝中商业发展有限公司（以下简称“渝商发公司”）的二级全资子公司重庆国展实业有限责任公司于2022中国国际智能产业博览会期间重磅推出重庆首个智慧新零售SaaS平台。<br>
                                渝商发拥有<span class="clolrred">39个重庆老字号</span>,<span class="clolrred">6万方物业</span>，年<span class="clolrred">线下流量3800万人次</span>，线下商业板块年营收约<span class="clolrred">2亿元</span>，大宗贸易年营收约<span>5亿美金</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-one">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">客户案例</div>
                </div>
                <div class="text-h33">
                    <div>“高科+”高科数字服务增值平台</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="margin-top: 40px;">
                        <div class="img-box" style="width: 655px;height: 479px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img17.png" alt="">
                        </div>
                        <div class="box-mian-text">
                            “高科+”是高科旗下生态（企业、员工、消费者）统一会员权益平台，链接高科集团大服务体系资源，遴选内外优势资源，优选园区商业和生活场景，通过<span class="clolrred">统一大会员、统一支付、统一权益、统一积分福利等</span>共享共赢服务层的打造，赋能高科自有业务生态和入驻企业员工及消费者，为企业提供优质商务增值服务，为员工和消费者提供食住行游娱购等生活特权服务，形成<span class="clolrred">智能化、多元化、便利化</span>的高科集团数字商务增值服务平台。
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-one" style="background-color: #fff;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">客户案例</div>
                </div>
                <div class="text-h33">
                    <div>重庆对外经贸学院产学研平台</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="margin-top: 40px;">
                        <div class="img-box" style="width: 494px;height: 493px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img18.png" alt="">
                        </div>
                        <div class="box-mian-text juspace-around">
                            <div>
                                <div class="font-25">◆ “平台学、平台练、平台销、平台创”四维赋能体系</div>
                                <div class="font-21">
                                    打造校园专属的跨境电商教学实训平台，在政府、企业、科研机构的共同助力下，师生即是教学参与者又是平台建设和经营的实操者和消费者，形成校园跨境电商微生态；
                                </div>
                            </div>
                            <div>
                                <div class="font-25">◆  政校联动 校企联动  </div>
                                <div class="font-21">
                                    以社会发展的需求为方向，走产、学、研一体化的道路，与高校的合作中实现优势互     补、利益共享，推进“定制式”培养等多种合作形式，定向定点解决结构性失业、解决文科生就业难问题。
                                </div>
                            </div>
                            <div>
                                <div class="font-25">◆ “人货场”场景闭环</div>
                                <div class="font-21">
                                    打通校内和校外、线上和线下双向通道，结合学校开设的电商类相关课程，构建一个电商产业里完整、真实的“人、货、场”闭环。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-one">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">专利及资质</div>
                </div>
                <div class="text-h33">
                    <div>专利和认定</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="margin-top: 40px;">
                        <div class="img-box" style="width: 1282px;height: 530px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img19.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-one" style="background-color: #fff;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">专利及资质</div>
                </div>
                <div class="text-h33">
                    <div>全链路资质和授权</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="margin-top: 40px;">
                        <div class="img-box margin10" style="width: 303px;height: 445px;margin-left: 0;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img20.png" alt="">
                        </div>
                        <div class="img-box margin10" style="width: 303px;height: 445px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img21.png" alt="">
                        </div>
                        <div class="img-box margin10" style="width: 303px;height: 445px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img22.png" alt="">
                        </div>
                        <div class="img-box margin10" style="width: 303px;height: 445px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img23.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-one">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">专利及资质</div>
                </div>
                <div class="text-h33">
                    <div>全链路资质和认定</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="margin-top: 40px;">
                        <div class="img-box" style="width: 1294px;height: 308px;border: 1px dashed #ccc;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img25.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import websitetop from './websitetop'
    export default {
        components: {
            websitetop
        },
        data() {
            return {

            }
        },
        created() {

        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .mian-box {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    
    .banner {}
    
    .body-box {
        display: flex;
        flex-direction: column;
    }
    
    .box-one {
        height: 900px;
        background: #F4F4F8;
        min-width: 1280px;
    }
    
    .box-title {
        display: flex;
        font-size: 51px;
        color: #1F1F1F;
        font-weight: 700;
        font-family: Source Han Sans CN;
    }
    
    .box-mian {
        display: flex;
        margin: 0 auto;
    }
    
    .img-box {
        width: 715px;
        height: 443px;
    }
    
    .box-mian-text {
        width: 527px;
        /* height: 250px; */
        font-size: 21px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #1F1F1F;
        margin-left: 41px;
    }
    
    .box-mian-bigbox {
        margin: 0 auto;
        display: flex;
        align-items: center;
        margin-top: 105px;
    }
    
    .small-box {
        width: 398px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .small-box-title {
        color: #2B2F79;
        font-size: 42px;
        font-weight: 700;
    }
    
    .small-box-value {
        margin-top: 27px;
        font-size: 27px;
        color: #323232;
    }
    
    .small-box-textbox {
        margin-top: 45px;
        background: #F4F4F8;
        border-radius: 15px;
        height: 374px;
        width: 100%;
    }
    
    .small-box-textbox-text {
        font-size: 17px;
        color: #323232;
        line-height: 31px;
        width: 306px;
        margin: 0 auto;
        margin-top: 19px;
    }
    
    .small-box-img {
        width: 398px;
        height: 200px;
    }
    
    .text-h19 {
        font-size: 19px;
        font-weight: 700;
        color: #323232;
        line-height: 30px;
    }
    
    .text-h15 {
        margin-top: 15px;
        font-size: 15px;
        line-height: 25px;
        color: #323232;
        display: -webkit-box;
        /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 2;
        /* 控制最多显示几行 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        overflow: hidden;
    }
    
    .next {
        margin-top: 15px;
        font-size: 15px;
        color: #323232;
        cursor: pointer;
    }
    
    .footer-box {
        height: 490px;
        background: #2B2F79;
        min-width: 1280px;
    }
    
    .footer-box-btn {
        margin: 0 auto;
        margin-top: 94px;
        width: 283px;
        height: 61px;
        background: #FFFFFF;
        border-radius: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .footer-text {
        font-size: 29px;
        color: #1F1F1F;
    }
    
    .service-small-box {
        width: 398px;
        height: 330px;
        background: #F4F4F8;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .service-img {
        margin-top: 59px;
        width: 63px;
        height: 63px;
    }
    
    .service-text {
        font-size: 29px;
        font-weight: 700;
        color: #1F1F1F;
        margin-top: 34px;
    }
    
    .service-text-box {
        margin-top: 33px;
        width: 305px;
        font-size: 17px;
        color: #323232;
        line-height: 31px;
    }
    
    .big-img {
        margin-top: 31px;
        width: 1326px;
        height: 577px;
    }
    
    .flex-center {
        display: flex;
        justify-content: center;
    }
    
    .text-footer {
        flex-direction: column;
        align-items: center;
        margin-top: 71px;
        line-height: 38px;
        font-size: 23px;
        color: #1F1F1F;
    }
    
    .fz-box {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 114px;
        position: relative;
    }
    
    .fz-box-top {
        display: flex;
        justify-content: space-around;
        width: 1292px;
    }
    
    .fz-box-img {
        width: 1292px;
        height: 32px;
    }
    
    .fz-box-bg {
        position: absolute;
        bottom: 0;
        width: 1916px;
        height: 377px;
    }
    
    .fz-small-box {
        width: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .fz-small-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #1F1F1F;
        line-height: 25px;
        font-size: 15px;
    }
    
    .fz-small-time {
        color: #2B2F79;
        line-height: 50px;
        font-weight: 700;
        font-size: 23px;
    }
    
    .bg-f {
        background: #fff;
        width: 1278px;
        height: 594px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .text-h33 {
        color: #2B2F79;
        font-weight: 700;
        font-size: 33px;
        margin-top: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .kh-text-box {
        width: 527px;
        height: 460px;
        margin-left: 48px;
    }
    
    .text-boxtitle {
        font-size: 27px;
        color: #2B2F79;
    }
    
    .text-boxbody {
        font-size: 21px;
        color: #1F1F1F;
        line-height: 42px;
    }
    
    .clolrred {
        color: red;
    }
    
    .font-25 {
        font-size: 25px;
        color: #2B2F79;
        text-decoration: underline;
        margin-bottom: 10px;
    }
    
    .font-21 {
        font-size: 21px;
        color: #1F1F1F;
    }
    
    .juspace-around {
        width: 728px;
        justify-content: space-around;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .margin10 {
        margin-left: 10px;
        border: 1px dashed #ccc;
    }
</style>